/**
 * Copyright (c) Enalean, 2016. All Rights Reserved.
 *
 * This file is a part of Tuleap.
 *
 * Tuleap is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * Tuleap is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Tuleap. If not, see <http://www.gnu.org/licenses/>.
 */

.demo {
    display: flex;
    justify-content: space-between;

    .example {
        width: 50%;
        margin: 0 10px 0 0;

        .tlp-centered {
            max-width: 400px;
        }

        &:not(.example-hide-margins) {
            .tlp-framed-vertically,
            .tlp-framed-horizontally {
                position: relative;
            }

            .tlp-framed-vertically::before,
            .tlp-framed-vertically::after {
                position: absolute;
                left: 0;
                width: 100%;
                height: 20px;
                content: '';
            }

            .tlp-framed-vertically::before {
                top: 0;
            }

            .tlp-framed-vertically::after {
                bottom: 0;
            }

            .tlp-framed-horizontally::before,
            .tlp-framed-horizontally::after {
                position: absolute;
                top: 0;
                width: 20px;
                height: 100%;
                content: '';
            }

            .tlp-framed-horizontally::before {
                left: 0;
            }

            .tlp-framed-horizontally::after {
                right: 0;
            }
        }
    }

    #example-modals-structure {
        .tlp-modal {
            display: flex;
            position: relative;
            width: auto;
            margin: 0;
            transform: unset;
            opacity: 1;
            z-index: 1;

            > .tlp-modal-body {
                border: 1px solid transparent;
                border-top: 0;
                border-bottom: 0;
            }

            > .tlp-modal-footer {
                border-right: 1px solid transparent;
                border-bottom: 1px solid transparent;
                border-left: 1px solid transparent;
            }
        }
    }

    [id^=example-layout-] {
        > div {
            min-height: 300px;

            > main {
                height: 300px;
            }

            > main:not(.tlp-centered) {
                margin: 0;
            }
        }
    }

    .code {
        display: flex;
        width: 50%;
        margin: 0 0 0 10px;

        // scss-lint:disable SelectorFormat
        .CodeMirror {
            flex: 1;
            background-image: none;
            line-height: 18px;
        }

        // scss-lint:disable SelectorFormat
        .CodeMirror-overlayscroll-horizontal > div,
        .CodeMirror-overlayscroll-vertical > div {
            background: $editor-scrollbar-color;
        }
    }

    .doc-table-color {
        table-layout: fixed;

        .doc-color-name {
            width: 300px;
        }

        .doc-color-variable {
            width: 400px;
        }

        .code-inline {
            font-size: 13px;
        }

        .doc-color {
            display: inline-block;
            width: 30px;
            height: 30px;
            margin: 0 10px 0 0;
            border-radius: 50%;
            vertical-align: middle;

            &.doc-color-orange           { background-color: $tlp-theme-orange; }
            &.doc-color-blue             { background-color: $tlp-theme-blue;   }
            &.doc-color-green            { background-color: $tlp-theme-green;  }
            &.doc-color-grey             { background-color: $tlp-theme-grey;   }
            &.doc-color-purple           { background-color: $tlp-theme-purple; }
            &.doc-color-red              { background-color: $tlp-theme-red;    }

            &.doc-color-inca-silver      { border: 3px solid $tlp-swatch-inca-silver;      background-color: $tlp-swatch-inca-silver-secondary;      }
            &.doc-color-chrome-silver    { border: 3px solid $tlp-swatch-chrome-silver;    background-color: $tlp-swatch-chrome-silver-secondary;    }
            &.doc-color-fiesta-red       { border: 3px solid $tlp-swatch-fiesta-red;       background-color: $tlp-swatch-fiesta-red-secondary;       }
            &.doc-color-teddy-brown      { border: 3px solid $tlp-swatch-teddy-brown;      background-color: $tlp-swatch-teddy-brown-secondary;      }
            &.doc-color-clockwork-orange { border: 3px solid $tlp-swatch-clockwork-orange; background-color: $tlp-swatch-clockwork-orange-secondary; }
            &.doc-color-red-wine         { border: 3px solid $tlp-swatch-red-wine;         background-color: $tlp-swatch-red-wine-secondary;         }
            &.doc-color-acid-green       { border: 3px solid $tlp-swatch-acid-green;       background-color: $tlp-swatch-acid-green-secondary;       }
            &.doc-color-army-green       { border: 3px solid $tlp-swatch-army-green;       background-color: $tlp-swatch-army-green-secondary;       }
            &.doc-color-sherwood-green   { border: 3px solid $tlp-swatch-sherwood-green;   background-color: $tlp-swatch-sherwood-green-secondary;   }
            &.doc-color-ocean-turquoise  { border: 3px solid $tlp-swatch-ocean-turquoise;  background-color: $tlp-swatch-ocean-turquoise-secondary;  }
            &.doc-color-daphne-blue      { border: 3px solid $tlp-swatch-daphne-blue;      background-color: $tlp-swatch-daphne-blue-secondary;      }
            &.doc-color-lake-placid-blue { border: 3px solid $tlp-swatch-lake-placid-blue; background-color: $tlp-swatch-lake-placid-blue-secondary; }
            &.doc-color-deep-blue        { border: 3px solid $tlp-swatch-deep-blue;        background-color: $tlp-swatch-deep-blue-secondary;        }
            &.doc-color-plum-crazy       { border: 3px solid $tlp-swatch-plum-crazy;       background-color: $tlp-swatch-plum-crazy-secondary;       }
            &.doc-color-peggy-pink       { border: 3px solid $tlp-swatch-peggy-pink;       background-color: $tlp-swatch-peggy-pink-secondary;       }
            &.doc-color-flamingo-pink    { border: 3px solid $tlp-swatch-flamingo-pink;    background-color: $tlp-swatch-flamingo-pink-secondary;    }
        }
    }
}

@media (max-width: 1200px) {
    .demo {
        flex-direction: column-reverse;
        justify-content: flex-start;

        .example {
            width: 100%;
            margin: 10px 0 0;
        }

        .code {
            width: 100%;
            margin: 0 0 10px;
        }
    }
}
